<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" href="css/gototop.css" />
		<link rel="stylesheet" href="css/common.css" />
		<style>	
		/*左内容区*/
		.main-left .article-list {
			
		}
		.article-list .article-item:not(:first-child) {
			margin-top: 30px;
		}
		.article-list .article-item {
			margin-bottom: 20px;
			border-bottom: 1px dashed #99A9BF;
			padding-bottom: 30px;
		}
		.article-list .article-item .article-title {
			text-decoration: none;
			color: #409EFF;
			font-size: 23px;
		}
		
		.article-list .article-item .article-title:hover {
			text-decoration: underline;
		}
		
		.article-list .article-item .post-info {
			color: #878D99;
			font-size: 14px;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		
		.article-list .article-item .post-info img {
			position: relative;
			top: 2px;
			margin-right: 3px;
		}
		
		.article-list .article-item .post-info > span:not(:first-child) {
			margin-left: 15px;	
		}
		
		.article-list .article-item .article-summary {
			color: #5A5E66;	
			background: #FAFAFA;
			padding: 10px;
		}
		.article-list .article-item .article-summary .look-more {
			position: relative;
			top: 2px;
			margin-left: 5px;
		}
		.article-list .article-item .article-image {
			margin-top: 10px;
		}
		.article-list .article-item .article-image img{
			width: 660px;
			max-height: 300px;
		}
		
		.article-list .dixian {  
		   height: 30px;  
		   line-height: 30px;  
		   text-align: center;  
		}  
		.article-list .dixian .line {  
		   display: inline-block;  
		   width: 245px;  
		   border-top: 1px solid #DFE4ED ;  
		}  
		.article-list .dixian .txt {  
		   color: #B4BCCC;  
		   vertical-align: middle; 
		   font-size: 14px; 
		}  
		
		
		</style>
	</head>
	<body>
		<div id="app">
		 	<!-- 头部导航 -->
		    <header class="header" :class="{ 'header-fixed' : headerFixed }">
			    <div class="header-content">
				    <span class="header-title">{ Mingshan 的博客 }</span>	
				    <el-row>
				        <el-col :span="24">			          
				          <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="">
				            <el-menu-item index="1"><a href="index.html">首页</a></el-menu-item>
				            <el-menu-item index="2"><a href="随笔.html">随笔</a></el-menu-item>
				            <el-menu-item index="3"><a href="归档.html">归档</a></el-menu-item>
				            <el-menu-item index="4"><a href="标签.html">标签</a></el-menu-item>
				            <el-menu-item index="5"><a href="关于.html">关于</a></el-menu-item>
				          </el-menu>
				        </el-col>
				    </el-row>
			    </div>
		    </header>
		    <div v-show="headerFixed" style="position: relative;height: 60px;width: 100%;"></div>

			<main>
            <!-- 左侧导航 -->
	        <div class="main-left">
	        	<div class="article-list">
	        		<div class="article-item">
	        			<a href="article-detail.html" class="article-title">谈谈基于ZooKeeper的分布式锁</a>
	        			<div class="post-info">
	        				<span class="post-time"><img src="img/发表.png"><i>发表于 2017-10-08</i></span>
	        				<span class="post-time"><img src="img/归档.png"><i>归档于 Java</i></span>
	        				<span class="post-time"><img src="img/评论(文章).png"><i>8</i></span>
	        			</div>
	        			<div class="article-summary">
	        				分布式锁可以基于以下几种方式实现：
							基于数据库的乐观锁，用于分布式锁
							基于缓存(Redis, memcached)实现分布式锁
							基于ZooKeeper实现分布式锁
							在这篇文章中，主要讲讲ZooKeeper以及分布式锁的实现，通过了解基于ZooKeeper分布式锁实现的原理，我们会对ZooKeeper有一个基本的了解。
							ZooKeeper介绍
							首先谈谈ZooKeeper，ZooKeeper是一种为分布式应用所设计的高可用、高性能且一致的开源协调服务，它提供了一项基本服务：分布式锁服务. ...
							<a href="article-detail.html" title="查看更多" class="look-more"><img src="img/官网-查看详情 (1).png" />	</a>      			
	        			</div>
	        			<div class="article-image">
	        				<img src="img/883a47a7d933c89556237e40d41373f08202004e.jpg" />
	        			</div>
	        		</div>
	        		
	        		<div class="article-item">
	        			<a href="article-detail.html" class="article-title">利用SpringMVC实现RESTful API，并与Swagger集成生成API文档</a>
	        			<div class="post-info">
	        				<span class="post-time"><img src="img/发表.png"><i>发表于 2017-10-08</i></span>
	        				<span class="post-time"><img src="img/归档.png"><i>归档于 Java</i></span>
	        				<span class="post-time"><img src="img/评论(文章).png"><i>8</i></span>
	        			</div>
	        			<div class="article-summary">
	        				<div>
	        				认识RESTful API
							RESTful API是目前比较成熟的API设计理论，它通过统一的API接口来对外提供服务，
							这样对其他调用者来说比较友好，更加容易实现前后端分离。那么如果要使用RESTful API来写我们的代码，那么就需要先知道RESTful API规范。			
							参考RESTful API规范
							下面是两篇文章讲解RESTful API的，推荐：...
							<a href="article-detail.html" title="查看更多" class="look-more"><img src="img/官网-查看详情 (1).png" />	</a>  
	        				</div>
							
	        			</div>
	        			<div class="article-image">
	        				<img src="img/00c8227f9e2f07089e64cd3bec24b899a901f243.jpg" />
	        			</div>
	        		</div>
	        		
	        		<div class="article-item">
	        			<a href="article-detail.html" class="article-title">利用SpringMVC实现RESTful API，并与Swagger集成生成API文档</a>
	        			<div class="post-info">
	        				<span class="post-time"><img src="img/发表.png"><i>发表于 2017-10-08</i></span>
	        				<span class="post-time"><img src="img/归档.png"><i>归档于 Java</i></span>
	        				<span class="post-time"><img src="img/评论(文章).png"><i>8</i></span>
	        			</div>
	        			<div class="article-summary">
	        				认识RESTful API
							RESTful API是目前比较成熟的API设计理论，它通过统一的API接口来对外提供服务，
							这样对其他调用者来说比较友好，更加容易实现前后端分离。那么如果要使用RESTful API来写我们的代码，那么就需要先知道RESTful API规范。			
							参考RESTful API规范
							下面是两篇文章讲解RESTful API的，推荐 ...
							<a href="article-detail.html" title="查看更多" class="look-more"><img src="img/官网-查看详情 (1).png" />	</a>  
	        			</div>
	        			<div class="article-image">
	        				<img src="img/fcf251e736d12f2e9975495b4ac2d562853568b3.jpg" />
	        			</div>
	        		</div>
	        		
	        		<!--底线-->
	        		<div class="dixian">  
					   <span style="white-space:pre">   </span><span class="line"></span>  
					   <span style="white-space:pre">   </span><span class="txt">别看了，我是有底线的</span>  
					   <span style="white-space:pre">   </span><span class="line"></span>  
					</div>  
	        	</div>
	
	        </div>

          <!-- 右侧主内容区 -->
          <div class="main-right" >
             <div class="block">
             	<!--站点提示-->
                <div class="site-tips">
				    <el-card :body-style="{ padding: '0px' }">
				      <img src="img/maekagami-1.jpg" class="image" style="width: 300px;">
				      <div style="padding: 14px;">
				        <span>欢迎来到我的博客，本博客的内容大部分属于原创，少部分是转载的(￣▽￣)~*</span>
				        <div class="bottom clearfix">
				          <time class="time">{{ currentDate }}</time>
				          <el-popover ref="popover1" placement="top-start" title="联系我" width="200" trigger="hover" 
				          	content="QQ: 499445428   邮箱：499445428@qq.com">
						  </el-popover>
				          <el-button  type="text" v-popover:popover1>我在这里</el-button>
				          
				        </div>
				      </div>
				    </el-card>
                </div>
				<!--S 文章 评论-->
			    <div class="hot-article-comment">
			    <!--tab选择-->
			    <el-tabs type="border-card">
				  <el-tab-pane>
				    <span slot="label"><i class="el-icon-news"></i> 最热文章</span>
				    <!--文章列表-->
			    	<div class="hot-article-list">
			    		<div class="hot-article-item">
			    			<div class="view-comment-count">
			    				<span><img src="img/浏览 (1).png"><i>1322</i></span>
			    				<span><img src="img/评论 (2).png"><i>122</i></span>
			    			</div>
			    			<div class="view-comment-content">
			    				<a href="article-detail.html">博客重构总结：React 服务端渲染结合单页面应用</a>
			    			</div>
			    		</div>
			    		
			    		<div class="hot-article-item">
			    			<div class="view-comment-count">
			    				<span><img src="img/浏览 (1).png"><i>122</i></span>
			    				<span><img src="img/评论 (2).png"/><i>122</i></span>
			    			</div>
			    			<div class="view-comment-content">
			    				<a href="article-detail.html">博客重构总结：React 服务端渲染结合单页面应用</a>
			    			</div>
			    		</div>
			    		
			    		<div class="hot-article-item">
			    			<div class="view-comment-count">
			    				<span><img src="img/浏览 (1).png"><i>122</i></span>
			    				<span><img src="img/评论 (2).png"/><i>122</i></span>
			    			</div>
			    			<div class="view-comment-content">
			    				<a href="article-detail.html">博客重构总结：React 服务端渲染结合单页面应用</a>
			    			</div>
			    		</div>
			    		
			    	</div>
			    	
				  </el-tab-pane>
				  <el-tab-pane>
				    <span slot="label"><i class="el-icon-document"></i> 最新评论</span>
				    	<div class="new-comment-list">
				    		<div class="new-comment-item">
				    			<a href="#" class="user-name">mingshan</a> <span> 评论了 </span> <a href="#" class="article-title">博客重构总结：React 服务端渲染结合单页面应用</a>
				    			: 
				    			<span class="comment-summary">你好，问下react服务端渲染除了seo和首屏输出以外还有什么特别的优点……</span>
				    		</div>
				    		
				    		<div class="new-comment-item">
				    			<a href="#" class="user-name">mingshan</a> <span> 评论了 </span> <a href="#" class="article-title">博客重构总结：React 服务端渲染结合单页面应用</a>
				    			: 
				    			<span class="comment-summary">你好，问下react服务端渲染除了seo和首屏输出以外还有什么特别的优点……</span>
				    		</div>
				    		
				    		<div class="new-comment-item">
				    			<a href="#" class="user-name">mingshan</a> <span> 评论了 </span> <a href="#" class="article-title">博客重构总结：React 服务端渲染结合单页面应用</a>
				    			: 
				    			<span class="comment-summary">你好，问下react服务端渲染除了seo和首屏输出以外还有什么特别的优点……</span>
				    		</div>
				    	</div>
				  </el-tab-pane>
				</el-tabs>
				</div>
				<!--E 文章 评论-->
				<div class="friend-link">
					<span>友情链接</span>
					 <ul v-for="o in 4" :key="o" class="friend-link-list">
					 	<li><a href="https://mstao.github.io/">{{'明山的博客 ' + o }}</a></li>
					 </ul>
				</div>
				
				<div class="footer">
					Copyright &copy; 2017 <img src="img/心 (1).png" /> Mingshan <br>
					Design by <a href="HTT">博客源代码</a>
				</div>
			  </div>
          </div>
    	</main>
		<!--GO TO TOP-->
		<div class="go-top">
	        <div class="arrow"></div>
	        <div class="stick"></div>
    	</div>
    	
		</div>
	
	</body>
	<!-- 先引入 Vue -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
  	<!-- 引入组件库 -->
  	<script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
  	<script src="https://cdn.bootcss.com/jquery/1.11.0-rc1/jquery.min.js"></script>
  	<script>
  	jQuery.noConflict();
    
    (function($){
         //在匿名函数里使用$作为jQuery别名,不影响全局
         $(function() {
		    $(window).scroll(function() {
		        if ($(window).scrollTop() > 100)
		            $('.go-top').show();
		        else
		            $('.go-top').hide();
		    });
		    $('.go-top').click(function() {
		        $('html, body').animate({scrollTop: 0}, 1000);
		    });
		});
	})(jQuery);
  		
    new Vue({
      el: '#app',
      data: function (){
	    return {
	      active:true,
	      headerFixed : true,
	      fullscreenLoading: false,
	      currentDate: (new Date()).toLocaleDateString()
	    }
	  }
    })
  	</script>
</html>
